<template>
  <Layout desc="以addEventListener为例封装一个Hook">
    <div class="text-center mt-40">
      <div
        ref="el"
        class="size-50 grid place-items-center bg-[#73d1da] text-white mb-5"
      >
        这里面才监听(x: {{ x }}, y: {{ y }})
      </div>
      <el-button @click="off" type="primary">停止监听</el-button>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { useEventListener } from '@/hooks/useEventListener'

const el = ref(null)
const x = ref(0)
const y = ref(0)

const move = (e: MouseEvent) => {
  x.value = e.clientX
  y.value = e.clientY
}

// const off = useEventListener('mousemove', move) // 不传默认监听window
const off = useEventListener(el, 'mousemove', move)
</script>

<style scoped lang="scss"></style>
